package com.lzgcoding.onlineshopapp.feature.detail.component

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil3.compose.SubcomposeAsyncImage
import com.lzgcoding.onlineshopapp.ui.theme.LargePadding
import com.lzgcoding.onlineshopapp.ui.theme.MediumPadding

@Composable
fun ProductImages(
    modifier: Modifier = Modifier,
    images: List<String>,
    selectedImageIndex: Int,
    onSelectedImageChange: (Int) -> Unit
) {
    Box(modifier = modifier) {
        SubcomposeAsyncImage(
            model = images[selectedImageIndex],
            contentDescription = "$selectedImageIndex-img",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Fit,
            loading = {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    CircularProgressIndicator()
                }
            }
        )

        ImageList(images, selectedImageIndex, onSelectedImageChange)
    }

}

@Composable
private fun BoxScope.ImageList(
    images: List<String>,
    selectedImageIndex: Int,
    onSelectedImageChange: (Int) -> Unit
) {
    LazyRow(
        modifier = Modifier
            .align(Alignment.BottomCenter)
            .wrapContentWidth()
            .padding(horizontal = LargePadding * 2)
            .padding(bottom = LargePadding)
            .clip(CircleShape)
            .shadow(10.dp)
            .background(MaterialTheme.colorScheme.background)
            .padding(MediumPadding),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(MediumPadding)
    ) {
        item { Spacer(Modifier) }
        itemsIndexed(images) { index, it ->
            SubcomposeAsyncImage(
                model = it,
                contentDescription = "$index-img",
                modifier = Modifier
                    .size(50.dp)
                    .clip(CircleShape)
                    .border(
                        width = if (index == selectedImageIndex) 2.dp else 0.dp,
                        color = if (index == selectedImageIndex) MaterialTheme.colorScheme.primaryContainer
                        else Color.Transparent,
                        shape = CircleShape
                    )
                    .clickable {
                        onSelectedImageChange(index)
                    },
                contentScale = ContentScale.Crop,
                loading = {
                    Box(
                        modifier = Modifier
                            .size(50.dp)
                            .clip(CircleShape),
                        contentAlignment = Alignment.Center
                    ) {
                        CircularProgressIndicator()
                    }
                }
            )
        }
        item { Spacer(Modifier) }
    }
}